<template>
  <view class="map-box">
    <map class="map" style="width: 100%; height: 100vh" :latitude="latitude" :longitude="longitude" :markers="covers">
      <cover-view @click="navToHospital" class="btn">导航去医院</cover-view>
      <view class="dialog" v-if="visible">
        <cover-view class="title">提示</cover-view>
        <cover-view class="nav">导航需要跳转第三方应用，是否跳转？{{item}}</cover-view>
        <view class="footer">
          <cover-view @click="visible = false">取消</cover-view>
          <cover-view></cover-view>
          <cover-view @click="confirm">确定</cover-view>
        </view>
      </view>
    </map>
  </view>
</template>

<script>
1
export default {
  data() {
    return {
      id: 0, // 使用 marker点击事件 需要填写id
      title: 'map',
      latitude: 39.909,
      longitude: 116.39742,
      content: '导航需要跳转第三方应用，是否跳转？',
      covers: [
        {
          width: 20,
          height: 20,
          latitude: 39.909,
          longitude: 116.39742,
          iconPath: '../../static/escort-service/location-blue.png',
        },
      ],
      visible: false
    }
  },
  onLoad(options) {
    this.address = options.address
    this.longitude = options.longitude
    this.latitude = options.latitude
    this.covers[0].latitude = options.latitude
    this.covers[0].longitude = options.longitude
  },
  methods: {
    confirm() {
			this.visible = false
			const item = uni.getStorageSync('map_info');
      var url = ''
      const address = this.address
      const latitude = this.latitude
      const longitude = this.longitude
      if (plus.os.name == 'Android') {
        var hasBaiduMap = plus.runtime.isApplicationExist({
          pname: 'com.baidu.BaiduMap',
          action: 'baidumap://',
        })
        var hasAmap = plus.runtime.isApplicationExist({
          pname: 'com.autonavi.minimap',
          action: 'androidamap://',
        })
        var urlBaiduMap =
          'baidumap://map/marker?location=' +
          latitude +
          ',' +
          longitude +
          '&title=' +
          encodeURIComponent(address) +
          '&src=com.bailb.hbb'
        var urlAmap =
          'androidamap://viewMap?sourceApplication=com.bailb.hbb&poiname=' +
          encodeURIComponent(address) +
          '&lat=' +
          latitude +
          '&lon=' +
          longitude +
          '&dev=0'
        if (hasAmap && hasBaiduMap) {
          plus.nativeUI.actionSheet(
            {
              title: '选择地图应用',
              cancel: '取消',
              buttons: [{ title: '百度地图' }, { title: '高德地图' }],
            },
            function (e) {
              switch (e.index) {
                case 1:
                  plus.runtime.openURL(urlBaiduMap)
                  break
                case 2:
                  plus.runtime.openURL(urlAmap)
                  break
              }
            }
          )
        } else if (hasAmap) {
          if (uni.getSystemInfoSync().platform == 'android') {
            this.$showModal({
              title: '公告',
              concent: '是否打开“高德地图”进行导航？',
              delCancel: false,
            })
              .then((res) => {
                plus.runtime.openURL(urlAmap)
              })
              .catch((res) => {})
          } else {
            uni.showModal({
              title: '公告',
              content: '是否打开“高德地图”进行导航？',
              success: (res) => {
                if (res.confirm) {
                  plus.runtime.openURL(urlAmap)
                }
              },
            })
          }
        } else if (hasBaiduMap) {
          if (uni.getSystemInfoSync().platform == 'android') {
            this.$showModal({
              title: '公告',
              concent: '是否打开“百度地图”进行导航？',
              delCancel: false,
            })
              .then((res) => {
                plus.runtime.openURL(urlBaiduMap)
              })
              .catch((res) => {})
          } else {
            uni.showModal({
              title: '公告',
              content: '是否打开“百度地图”进行导航？',
              success: (res) => {
                if (res.confirm) {
                  plus.runtime.openURL(urlBaiduMaps)
                }
              },
            })
          }
        } else {
          //如果是国外应用，应该优先使用这个，会启动google地图。这个接口不能统一坐标系，进入百度地图时会有偏差
          url =
            'geo:' +
            latitude +
            ',' +
            longitude +
            '?q=' +
            encodeURIComponent(address)
          if (uni.getSystemInfoSync().platform == 'android') {
            this.$showModal({
              title: '公告',
              concent: '是否打开“GoogleMap”进行导航？',
              delCancel: false,
            })
              .then((res) => {
                plus.runtime.openURL(url)
              })
              .catch((res) => {})
          } else {
            uni.showModal({
              title: '公告',
              content: '是否打开“GoogleMap”进行导航？',
              success: (res) => {
                if (res.confirm) {
                  plus.runtime.openURL(url)
                }
              },
            })
          }
        }
      } else {
        // iOS上获取本机是否安装了百度高德地图，需要在manifest里配置，在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加（如urlschemewhitelist:["iosamap","baidumap"]）
        plus.nativeUI.actionSheet(
          {
            title: '选择地图应用',
            cancel: '取消',
            buttons: [
              { title: 'Apple地图' },
              { title: '百度地图' },
              { title: '高德地图' },
            ],
          },
          function (e) {
            switch (e.index) {
              case 1:
                url =
                  'http://maps.apple.com/?q=' +
                  encodeURIComponent(address) +
                  '&ll=' +
                  latitude +
                  ',' +
                  longitude +
                  '&spn=0.008766,0.019441'
                break
              case 2:
                url =
                  'baidumap://map/marker?location=' +
                  latitude +
                  ',' +
                  longitude +
                  '&title=' +
                  encodeURIComponent(address) +
                  '&src=com.bailb.hbb'
                break
              case 3:
                url =
                  'iosamap://viewMap?sourceApplication=com.bailb.hbb&poiname=' +
                  encodeURIComponent(address) +
                  '&lat=' +
                  latitude +
                  '&lon=' +
                  longitude +
                  '&dev=1'
                break
              default:
                break
            }
            if (url != '') {
              plus.runtime.openURL(url, (e) => {
                plus.nativeUI.alert('本机未安装指定的地图应用')
              })
            }
          }
        )
      }
    },
    navToHospital() {
      this.visible = true
    },
  },
}
</script>

<style lang="scss" scoped>
.dialog {
  width: 259px;
  background: #ffffff;
  text-align: center;
  margin: 50% auto;
  padding: 20rpx;
  cover-view {
    background: #ffffff;
  }
  .title {
    color: #505050;
    font-weight: bold;
    font-size: 17px;
    height: 50px;
    line-height: 50px;
  }
  .nav {
    color: #505050;
    font-weight: bold;
    font-size: 13px;
    height: 70px;
    line-height: 70px;
  }
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cover-view:nth-child(1) {
      color: #383838;
      font-size: 15px;
      height: 50px;
      line-height: 50px;
      width: 129px;
    }
    cover-view:nth-child(2) {
      height: 50px;
      line-height: 50px;
      width: 1px;
      background: #dddddd;
    }
    cover-view:nth-child(3) {
      color: #43cf7c;
      font-size: 15px;
      width: 129px;
      height: 50px;
      line-height: 50px;
    }
  }
}
.map-box {
  height: 100%;
  width: 750rpx;
  position: relative;
  .btn {
    height: 96rpx;
    width: 282rpx;
    color: rgba(255, 255, 255, 1);
    background-color: rgba(65, 171, 133, 1);
    border-radius: 50px;
    font-size: 32rpx;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;
    line-height: 96rpx;
  }
}
.map {
  height: calc(100vh - 150px);
}
</style>
